<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>后台管理系统</title>
    <!-- Bootstrap -->
    <link href="static/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="static/css/font-awesome.min.css" rel="stylesheet">
    <!-- NProgress -->
    <link href="static/css/nprogress.css" rel="stylesheet">
    <!-- Animate.css -->
    <link href="https://colorlib.com/polygon/gentelella/css/animate.min.css" rel="stylesheet">
    <!-- Custom Theme Style -->
    <link href="static/css/custom.min.css" rel="stylesheet">
    <style type="text/css">
        #MyRight {
            width: 350px;
            height: 400px;
            background-color: white;
            align-content: center;
        }

        #MyLeft {
            width: 200px;
            height: 400px;
            align-content: center;
            border-radius: inherit;
            background-color: #3F9AE9;
            border: none;
        }

        #login {
            width: 231px;
            background-color: #2293F1;
            position: absolute;
            left: 23px;
        }

        .dd {
            position: absolute;
            top: 2px;
        }

        .bb {
            position: absolute;
            top: 2px;
            right: 35px;
        }

        #MyDiv {
            width: 300px;
            height: 300px;
            position: absolute;
            top: 60px;
            left: 222px;
        }

        #out {
            position: absolute;
            left: 30%;
            top: 20%;
            margin: auto;
        }
    </style>
</head>
<body class="login" style="background-image: url(static/images/bg-01.jpg); background-size: 100%;">
<input type="hidden" name="pageIndex" value="1">
<form method="post" action="backlogin.do">
    <div class="input-group" id="out">
        <div id="MyLeft" class="input-group-addon">
            <span style="color: white;">欢迎使用APP管理系统!</span>
        </div>
        <div id="MyRight" class="container">
            <div id="MyDiv">
                <h4 align="center">登录</h4>
                <div class="row">
                    <div class="form-group col-lg-4 col-xs-4 col-lg-offset-1 col-xs-offset-1" style="width: 280px;">
                        <label>用户名</label>
                        <input type="text" class="form-control" id="userName" name="userName" value="系统管理员" placeholder="请输入用户名" required=""/>
                    </div>
                    <div class="form-group col-lg-4 col-xs-4 col-lg-offset-1 col-xs-offset-1" style="width: 280px;">
                        <label>登录密码</label>
                        <input type="password" class="form-control" id="userPassword" name="userPassword" value="123456" placeholder="请输入密码"
                               required=""/>
                    </div>
                    <div class="form-group col-lg-4 col-xs-4 col-lg-offset-1 col-xs-offset-1" style="width: 300px;">
                        <input type="checkbox" checked="checked"/><span style="color: #999999;">我已同意</span>
                        <a class="dd" href="#">《服务协议》</a>
                        <a class="bb" href="#" style="color: #999999;">忘记密码</a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6 col-xs-6 col-lg-offset-1 col-xs-offset-1">
                        <button id="login" type="submit" class="btn btn-primary">登录</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
</body>
<script src="static/js/jquery-3.3.1.js" type="text/javascript"></script>
<script src="static/js/bootstrap.min.js" type="text/javascript"></script>
<script>
    $("form").submit(function () {
        if ($("#userName").val()==""||$("#userPassword").val()=="") {
            alert("用户名和密码不能为空");
            return false;
        }
        return true;
    });
</script>
</html>